<template>
   <div>
       <el-table
    :data="reviews.data"
    style="width: 100%">

    <el-table-column
      label="评论"
      width="180"
      prop="revContent"
      >
    </el-table-column>

    <el-table-column
      label="点赞数"
      width="180"
      prop="num">
    </el-table-column>

<el-table-column label="操作">
      <template slot-scope="scope">
          <div  @click="like(scope.row)"> 
        <img :src="picture" v-show="ifZan(scope.row)"/>  
      </div> 
        <el-button
          size="mini"
           @click="updateZan(scope.row)">点赞</el-button>
      </template>
    </el-table-column>
</el-table>

   </div>
</template>

<script>
import {showAll} from '../service/user';
import {update} from '../service/user';
import {look} from '../service/user';
import {mapState,mapActions} from 'vuex';
export default {
    data(){
        return{
            reviews:{},
            picture:{}
        }
    },
    created(){
        this.findAll();
    },
    computed:{
        ...mapState("user",["setReviews","reviews"])
    },
    methods:{
        async findAll(){
            var info = await showAll();
            this.reviews = info;
        },
        async ifZan(obj){
            var info = await look(obj.userId,obj.revId);
            if(info == 1){
                this.picture = "../assets/buzan.png";
            }else{
                this.picture = "../assets/zan.png";
            }
        },
        async updateZan(obj){
          var info = await update(obj.userId,obj.revId);
          if(info == "ok"){
            this.findAll();
          }
        },
        ...mapActions("user",["setReviews"])
    }
}
</script>

<style>

</style>